<!--
 * @Author: your name
 * @Date: 2021-12-02 17:39:11
 * @LastEditTime: 2021-12-22 12:20:16
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue3.0-cli-ts\study-every-day\JS练习\转盘.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>转盘1</title>
  </head>

  <body>
    <style>
      .box {
        width: 600px;
        height: 600px;
        background-color: #dea681;
        border-radius: 50%;
        margin: 30px auto;
        padding: 20px;
        position: relative;
        aspect-ratio: 1/1;
        /* overflow: hidden; */
      }

      .lottery {
        width: 100%;
        height: 600px;
        margin: 0 auto;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
        background-color: #330000;
        box-shadow: 0 0 15px #000;
        /* transition: all 5s cubic-bezier(0.45, 0.05, 0.69, 1.41); */
      }

      .block {
        box-shadow: 0 0 1px #000 inset;
        position: absolute;
        width: 300px;
        height: 300px;
        transform-origin: right bottom;
        -webkit-transform-origin: right bottom;
      }

      .block {
        background-color: #f1aaa6;
      }

      /* .block:nth-child(n+5) {
        background-color: #FD5B78;
      } */

      .block:nth-child(1) {
        transform: rotate(0deg) skewY(45deg);
      }

      .block:nth-child(2) {
        transform: rotate(45deg) skewY(45deg);
      }

      .block:nth-child(3) {
        transform: rotate(90deg) skewY(45deg);
      }

      .block:nth-child(4) {
        transform: rotate(135deg) skewY(45deg);
      }

      .block:nth-child(5) {
        transform: rotate(180deg) skewY(45deg);
      }

      .block:nth-child(6) {
        transform: rotate(225deg) skewY(45deg);
      }

      .block:nth-child(7) {
        transform: rotate(270deg) skewY(45deg);
      }

      .block:nth-child(8) {
        transform: rotate(315deg) skewY(45deg);
      }

      .content {
        width: 200px;
        height: 230px;
        transform-origin: center center 0;
        transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
        -webkit-transform: skewY(-45deg) rotate(-22.5deg) translate(10px, 70px);
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
      }

      .content .img {
        width: 100px;
        height: 100px;
        margin: 0 auto;
      }

      .content .text {
        width: 100px;
        height: 50px;
        font-size: 20px;
        line-height: 32px;
        margin: 0 auto;
      }

      .content .none {
        width: 34px;
        height: 200px;
        margin: 0 auto;
        text-align: center;
        font-size: 34px;
        font-weight: bold;
      }

      .content img {
        display: block;
        width: 80px;
        height: 100px;
      }

      .btn {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
        line-height: 100px;
        background-color: #9966cc;
        position: absolute;
        font-size: 28px;
        top: 270px;
        left: 270px;
        cursor: pointer;
        box-shadow: 0 0 14px #000 inset;
        color: #fff;
      }

      .jiantou {
        height: 0px;
        width: 0px;
        position: absolute;
        top: 35%;
        left: 300px;
        box-shadow: 0 0 14px #000 inset;
        border-bottom: 60px solid #9966cc;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
      }
    </style>

    <div class="box">
      <div class="lottery">
        <div class="block">
          <div class="content">
            <div class="none">1未中奖</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="img">
              <img src="" />
            </div>
            <div class="text">
              <p>一等奖</p>
              <p>小米手环</p>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">2未中奖</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">3未中奖</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="img">
              <img src="" />
            </div>
            <div class="text">
              <p>二等奖</p>
              <p>罗技鼠标</p>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">4未中奖</div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="img">
              <img src="" />
            </div>
            <div class="text">
              <p>三等奖</p>
              <p>一包糖果</p>
            </div>
          </div>
        </div>
        <div class="block">
          <div class="content">
            <div class="none">5未中奖</div>
          </div>
        </div>
      </div>
      <div class="btn">抽 奖</div>
      <div class="jiantou"></div>
    </div>

    <script>
      // var lottery = {
      //   ch: 0,
      // };

      // function clickBtn() {
      //   var n1 = Math.floor(Math.random() * 8 + 1);
      //   var n2 = Math.floor(Math.random() * 4 + 4);
      //   lottery.ch = 45 * n1 + 360 * n2 + 22.5;
      //   $(this)
      //     .unbind()
      //     .css('cursor', 'wait');
      //   $('.lottery').css({
      //     transition: 'all 8s ease',
      //     transform: 'rotate(' + lottery.ch + 'deg)',
      //     '-webkit-transform': 'rotate(' + lottery.ch + 'deg)',
      //   });
      // }
      // // $('.btn').bind('click', clickBtn);

      // $('.lottery')[0].addEventListener('transitionend', function() {
      //   $('.btn')
      //     .bind('click', clickBtn)
      //     .css('cursor', 'pointer');
      //   setTimeout(result, 2000);
      // });

      // function result() {
      //   alert('点击确认，再次开始游戏！');
      //   $('.lottery').css({
      //     transition: 'none',
      //     transform: 'none',
      //     '-webkit-transform': 'none',
      //   });
      // }

      const list = ['gs', 'tn', 'c', 'm', 's', 'v', 'A'];
      // list.sort();
      console.log(list);

      //要排序的数据
      let data = [
        { chinese: '蔡司', english: 'Chase' },
        { chinese: '艾伦', english: 'Allen' },
        { chinese: '左拉', english: 'Zola' },
        { chinese: '贝克', english: 'Baker' },
        { chinese: '伯格', english: 'Berg' },
        { chinese: '菲奇', english: 'Fitch' },
        { chinese: '迪安', english: 'Dean' },
        { chinese: '厄尔', english: 'Earle' },
        { chinese: '亨利', english: 'Henry' },
      ];

      //根据汉字首字母排序
      //使用箭头函数
      //【注】localeCompare() 是js内置方法
      let lastData = data.sort((a, b) => b.chinese.localeCompare(a.chinese)); //z~a 排序
      // console.log(data);
      let firstData = data.sort((a, b) => a.chinese.localeCompare(b.chinese, 'zh')); //a~z 排序

      //根据英文排序 比较 首字母ASCLL码
      //// console.log(data[0].english.charCodeAt(0));
      // data.sort((a, b) => b.english.charCodeAt(0) - a.english.charCodeAt(0)); //z~a 排序
      // data.sort((a, b) => a.english.charCodeAt(0) - b.english.charCodeAt(0)); //a~z 排序

      // console.log(gd);

      //       1、isNaN(val)
      // 通过Number()强制类型转换 将val转成number类型，再判断是否为NaN
      //       2、Number.isNaN(val)
      // Es6 新加的严格判断是否val===NaN

      const debounce = (fn, ms = 200) => {
        let timeoutId;
        return function (...args) {
          console.log(args);
          if (timeoutId) clearTimeout(timeoutId);
          timeoutId = setTimeout(() => fn.apply(this, args), ms);
        };
      };

      const geApi1 = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve([11, 22, 33]);
          }, 1000);
        });
      };

      (async () => {
        // console.log(222);
        for (let i = 0; i < 10; i++) {
          await geApi1();
          // console.log(8);
        }
        // console.log('上传成功');
      })();
      // console.log(36);
      // const requestList = [];
      // for (let i = 0; i < 100; i++) {
      //   requestList.push(geApi1());
      // }
      // Promise.all(requestList).then(() => {
      //   console.log('成功');
      // });
    </script>

    <script src="./zhuanpan.js"></script>
  </body>
</html>
